<template>
    <el-container>
        <el-aside width="220px">
            <el-menu :default-active="menuList[0].child[0].name" class="el-menu-vertical-demo"
                     background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

                <el-submenu v-for="(item, index) of menuList" :index="item.name" :key="index">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>{{item.title}}</span>
                    </template>

                    <el-menu-item v-for="(child, indexC) of item.child" :index="child.name" :key="indexC"
                                  @click="addTab(child)">
                        {{child.title}}
                    </el-menu-item>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container>
            <el-header class="flex-between">
                <div>您好，{{ user.name }}</div>
                <div class="option">
                    <a href="javascript:;" @click="logout()">退出</a>
                </div>
            </el-header>

            <!--main-->
            <el-main>
                <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab"
                         closable>
                    <el-tab-pane v-for="(item, index) in editableTabs" :label="item.title" :name="item.name"
                                 :key="item.name">
                        <component :is="item.name"></component>
                    </el-tab-pane>
                </el-tabs>
            </el-main>

        </el-container>
    </el-container>
</template>

<script>
    import Vue from 'vue'
    import { menu } from '../menu'

    export default {
        components: {},
        data() {
            return {
                menuList: '',
                editableTabsValue: '',
                editableTabs: [],
                tabIndex: 1,
                currentTabComponent: '',
                user: '',
            }
        },
        methods: {
            addTab(target) {
                if (target.path.length == 0) {
                    return
                }

                // 判断是否已有tab
                if (JSON.stringify(this.editableTabs).indexOf(target.name) > -1) {
                    this.editableTabsValue = target.name
                    return
                }

                this.editableTabs.push(target)
                this.editableTabsValue = target.name
                Vue.component(target.name, res => require([`${target.path}`], res))
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName)
            },
            logout () {
                sessionStorage.removeItem('token')
                this.$router.push('/login')
            }
        },
        mounted: function () {

        },
        created: function () {
            this.menuList = menu

            // 取菜单第一个
            let first = this.menuList[0].child[0]

            this.editableTabsValue = first.name
            this.editableTabs.push(first)
            Vue.component(first.name, res => require([`${first.path}`], res))
        }
    }
</script>
